<template>
  <a href="https://github.com/PanJiaChen/vue-element-admin" target="_blank" class="github-corner" aria-label="View source on Github">
    <!--<svg
      width="80"
      height="80"
      viewBox="0 0 250 250"
      style="fill:#40c9c6; color:#fff;"
      aria-hidden="true"
    >
      <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z" />
      <path
        d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
        fill="currentColor"
        style="transform-origin: 130px 106px;"
        class="octo-arm"
      />
      <path
        d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
        fill="currentColor"
        class="octo-body"
      />
    </svg>-->

    <svg width="80" height="80" viewBox="0 0 250 250" xmlns="http://www.w3.org/2000/svg" t="1591277300476" class="icon" style="fill:#40c9c6; color:#fff;" version="1.1" p-id="951">
      <g>
        <title>源文链接</title>
        <path id="svg_2" stroke="null" d="m-2.000007,-1.666657l116.380001,116.38l27.323999,27.323999l109.296001,109.296l0,-252.999997l-253.000004,0l0.000002,-0.000002l0,0z" />
        <path id="svg_1" stroke="null" p-id="952" fill="#fff" d="m218.225592,59.773448a27.199473,27.163796 0 0 1 -22.092944,-11.321557l-33.237172,15.412012a33.518842,33.474877 0 0 1 0.046394,18.73137l33.190778,15.392154a27.411555,27.375599 0 1 1 -4.970663,12.867062l-34.556055,-16.024258a34.13189,34.087121 0 1 1 -0.115983,-43.171505l34.672038,-16.073899a26.927744,26.892422 0 0 1 -0.178944,-3.024818a27.255805,27.220057 0 1 1 27.242551,27.213437l0,0.000002zm0,67.472644a13.387654,13.370096 0 1 0 -13.39097,-13.370096a13.387654,13.370096 0 0 0 13.387654,13.370096l0.003313,0l0.000003,0zm-88.116613,-74.104743a20.214033,20.187518 0 1 0 20.214033,20.187518a20.214033,20.187518 0 0 0 -20.217344,-20.187518l0.003313,0l-0.000003,0zm176.23654,40.156615a13.387654,13.370096 0 1 0 13.390967,13.370096a13.387654,13.370096 0 0 0 -13.394281,-13.370096l0.003313,0z" />
        <path id="svg_3" stroke="null" p-id="7742" fill="#40c9c6" d="m218.499998,32.333328m-14.499998,0a14.499998,15.000002 0 1 0 28.999996,0a14.499998,15.000002 0 1 0 -28.999996,0z" />
      </g>
    </svg>
  </a>
</template>

<style scoped>
.github-corner:hover .octo-arm {
  animation: octocat-wave 560ms ease-in-out
}

@keyframes octocat-wave {
  0%,
  100% {
    transform: rotate(0)
  }
  20%,
  60% {
    transform: rotate(-25deg)
  }
  40%,
  80% {
    transform: rotate(10deg)
  }
}

@media (max-width:500px) {
  .github-corner:hover .octo-arm {
    animation: none
  }
  .github-corner .octo-arm {
    animation: octocat-wave 560ms ease-in-out
  }
}
</style>
